<!-- 字典管理 -->
<template>
    <div class="main-conent main-conent-minheight">
        <el-card shadow="never" class="border-none">
            <el-table :header-cell-style="{'background-image':'linear-gradient(#ffffff,#e3eaf4)'}" :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="AlarmDescp" label="描述信息（事件编码）">
                    <template slot-scope="scope">
                        {{ scope.row.AlarmDescp + ' (' + scope.row.EventID+ ')' }}
                    </template>
                </el-table-column>
                
                <el-table-column prop="Status" label="事件生效" width="100">
                    <span slot-scope="scope">
                        <span>{{scope.row.Status===1 ? "生效" :"不生效"}}</span>
                    </span>
                </el-table-column>
                <!-- <el-table-column prop="FeqTimes" label="设备分类"></el-table-column> -->
                <el-table-column prop="EventLevel" label="严重性等级" width="100">
                    <template slot-scope="scope">
                        <p style="color:red" v-if="scope.row.Level === 1">致命</p>
                        <p style="color:#F56C6C" v-if="scope.row.Level === 2">紧急</p>
                        <p style="color:#E6A23C" v-if="scope.row.Level === 3">重要</p>
                        <p style="color:#E6A23C" v-if="scope.row.Level === 4">监视</p>
                        <p style="color:#409EFF" v-if="scope.row.Level === 5">普通</p>
                        <p style="color:#67C23A" v-if="scope.row.Level === 6">通知</p>
                    </template>
                </el-table-column>
                <el-table-column prop="MergeSeconds" label="归并周期（秒）" width="180"></el-table-column>
                <!-- <el-table-column prop="IsCreateAlarm" label="产生告警" width="100">
                    <span slot-scope="scope">
                        <span>{{scope.row.IsCreateAlarm===1 ? "产生" :"不产生"}}</span>
                    </span>
                </el-table-column> -->
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="compile(scope.row)" type="primary" title="编辑" icon="el-icon-edit" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination v-if="total > 10" :total = total @sizeChange = 'sizeChange' @currentChange = 'currentChange' :pageNum = pageNum></pagination> -->
        </el-card>   
        <el-dialog v-el-drag-dialog title='编辑事件字典' :visible.sync="centerDialogVisible" top='7%'  width="40%" @close='closeDialog' :close-on-press-escape = false  :close-on-click-modal = false >
                    <!-- <span>这是一个dialog</span> -->
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="30%">
                <!-- <el-card shadow="never" class="border-none margin-t24"> -->
                    <el-row :gutter="24">
                        <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="事件编码：">
                                <el-input  size="small" v-model="ruleForm.EventID" disabled></el-input> 
                            </el-form-item>
                        </el-col>    
                        <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="事件描述：">
                                <el-input  size="small" type="textarea" rows="3" v-model="ruleForm.AlarmDescp" ></el-input> 
                            </el-form-item>    
                        </el-col>

                        <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="事件生效：" prop="Status">
                                <el-select size="small" v-model="ruleForm.Status" placeholder="请选择事件生效" style="width:100%;">
                                    <el-option :value="0" label="否"/>
                                    <el-option :value="1" label="是"/>
                                </el-select>
                            </el-form-item>    
                        </el-col>

                        <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="严重性等级：" prop="EventLevel">
                                <!-- <el-input size="small" style="width:70%;" v-model="ruleForm.Type" disabled ></el-input>  -->
                                <el-select size="small" style="width:100%" placeholder="请选择严重性等级" v-model="ruleForm.EventLevel">
                                    <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="归并周期：" prop="MergeSeconds">
                                <el-input size="small" v-model="ruleForm.MergeSeconds"><span slot="append">秒</span></el-input> 
                            </el-form-item>
                        </el-col>

                        <!-- <el-col :sm="24" :md="24" :lg="20">
                            <el-form-item  label="产生告警：" prop="IsCreateAlarm">
                                <el-select size="small" v-model="ruleForm.IsCreateAlarm"  style="width:100%;">
                                    <el-option :value="0" label="不产生"/>
                                    <el-option :value="1" label="产生"/>
                                </el-select>
                            </el-form-item>    
                        </el-col> -->
                    </el-row>
                <!-- </el-card> -->
            </el-form>    
            <span slot="footer" class="dialog-footer"> 
               
                <el-button size="small" class="newadd" type="primary" @click="determineClick('ruleForm')">保存</el-button>
                <el-button size="small" class="newadd"  @click="cancelClick()">取消</el-button>
            </span>
        </el-dialog> 
    </div>    
</template>

<script>
import { connrequest } from '@/api/firstPage'
// import { GetEventDict, EditEventDict } from '@/api/operator';
export default {
    data(){
        return {
            tableData: [],
            ruleForm:{},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            centerDialogVisible:false,
            levelList:[],
        }
    },
    created(){
        this.getData();
        
    },
    methods:{
        async getData(){
            const res = await connrequest('GetParamDictEvent')
            this.GetUIDictParam();
            this.tableData = res.Data;
            // this.total = res.Paging.ResultTotalCount;
        },
        async GetUIDictParam(){
            const data = {
                Data : {
                    FilterType:'AuditLogLevel'
                }
            }
            const res = await connrequest('GetUIDictParam',data)
            res.Data.map(item=>{
                this.levelList.push({
                    value:item.Value,
                    label:item.Descp
                })
            })
            
        },
        compile(row){
            
            this.ruleForm = {...row}
            this.centerDialogVisible = true;
        },
        async determineClick(){
            const data = {
                Data : this.ruleForm
            }
            const res = await connrequest('ModifyParamDictEvent',data)
            this.$message.success('修改成功')
            this.centerDialogVisible =false;
            this.getData();
        },
        cancelClick(){
            this.centerDialogVisible = false;
        },
        // 分页
        currentChange(pageNum){
            this.pageNum = pageNum;
            this.getData()
        },
        // 条数
        sizeChange(pageSize){
            this.pageNum = 1;
            this.pageSize = pageSize;
            this.getData()
        }
    }
}
</script>

<style>

</style>